<template>
	<view class="page-footer">
		<view class="menu-list">
			<view class="menu-item" v-for="(item,index) of menuData" :key="index" @click="handleClick(item)">
				<view class="item-icon">
					<image :src="item.icon" class="item-icon-logout"></image>
				</view>
				<view class="item-title">
					{{item.title}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "page-footer"
	}
</script>

<script setup>
	import menuList from '/config/menu.js';

	/**
	 * 接收菜单数据
	 */
	const menuData = menuList

	/**
	 * 根据path跳转路由
	 */
	const handleClick = (item) => {
		uni.redirectTo({
			name: item.path
		})
	}
</script>

<style>
	.page-footer {
		flex: 0;
		flex-basis: 88rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 4rpx 0rpx rgba(0, 0, 0, 0.02);
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding: 20rpx 30rpx;

		.menu-list {
			display: flex;

			.menu-item {
				display: flex;
				flex-direction: column;
				flex: 1;

				.item-icon {
					flex-basis: 60rpx;
					display: flex;
					justify-content: center;

					.item-icon-logout {
						width: 60rpx;
						height: 60rpx;
					}
				}

				.item-title {
					font-weight: 600;
					font-size: 20rpx;
					color: #333333;
					line-height: 28rpx;
					text-align: center;
				}
			}
		}
	}
</style>